## Setup Create icon files set. You should know how by now. Create manifest.json with these contents: ``` { "manifest_version": 3, "name": "", "version": "1.0", "description": ".", "author": "Weng Fei Fung", "icons": { "16": "icon16x16.png", "32": "icon32x32.png", "48": "icon48x48.png", "128": "icon128x128.png" }, "content_security_policy": { "extension_pages": "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; object-src 'self';" }, "permissions": [ "storage", "tabs", "activeTab" ], "options_ui": { "page": "options.html", "open_in_tab": false } } ``` Based on the manifest.json, we see that we have a new “options_ui” section and that it’s pointing to an options.html. So let's create the options.html. Create options.html: ``` Options

Options

``` Update/install the chrome extension because we will do some preliminary testing next. --- ## Preliminary Testing There are two major ways to open options page for your extension (or any extension): - Open from extension icon - Open from extensions page --- ### Open from extension icon Access the options page of any chrome extension icon by right-clicking the icon then going to Options. Options page will always open in a tab (if extension options tab already exists, it switches to that tab and refreshes) (if extension options tab does not exist, it opens a new tab) in this way. Like so: Right-click pinned icon if has been pinned: ![[Pasted image 20250326202942.png]] Or if not pinned, expand extensions list, then expand “...” menu for our extension: ![[Pasted image 20250326202954.png]] At extensions page, access the options page by going to Details... then going into Extension options (it’s not emphasized or anything)... then it’s going to open either as a popup modal or in a new tab - [chrome://extensions](chrome://extensions) - ...then going into Details: ![[Pasted image 20250326203007.png]] - Then going into Extension Options: ![[Pasted image 20250326203109.png]] - Then it’s going to open either as a popup modal or a new tab - Open in a popup modal (`"open_in_tab": false`) ![[Pasted image 20250326203129.png]] - Open in a new tab (`"open_in_tab": true`) ![[Pasted image 20250326203154.png]] --- We are going to keep `"open_in_tab": false` As it is, looks awful: ![[Pasted image 20250326203129.png]] What we will do is add rules for body width and height which will impact that. Our goal: ![[Pasted image 20250405002041.png]] Even better, we need to add a close button because user might get confused what to do next: ![[Pasted image 20250405003237.png]] Let's change options.html to: ``` Options

Options

``` options.css: ``` body { width: 550px; height: 300px; padding: 10px; } h1 { font-size: 20px; margin-bottom: 20px; } footer { position: absolute; bottom: 20px; right: 20px; text-align: right; } ``` options.js: ``` // Get the checkbox element const reportDataCheckbox = document.getElementById('reportData'); // Load saved checkbox state when the page loads document.addEventListener('DOMContentLoaded', async () => { const result = await chrome.storage.local.get(['checkedReportData']); reportDataCheckbox.checked = result.checkedReportData || false; }); // Save checkbox state when it changes reportDataCheckbox.addEventListener('change', async () => { await chrome.storage.local.set({ checkedReportData: reportDataCheckbox.checked }); }); // Close the options page document.getElementById('btn-close').addEventListener('click', async () => { window.close(); }); ``` --- ## Testing Reinstall/update the chrome extension. See if you can open the Options and it should open on top of chrome extensions. Tick the checkbox. Clicks "Close" button. Return back to the Options page and see if the checkbox is ticked. If it's still ticked. Then this test passes --- ## Discussion options.js checks if the checkbox is saved in Storage API. Then it updates the checkbox on options.html accordingly. When the user ticks or unticks the checkbox, a change event listener will save to Storage API. When the user clicks the Close button at the bottom right, `window.close()` is called which closes the Options page. In fact, `window.close()` closes any Chrome Extension presentation that the javascript is attached to. In this case, `window.close()` is attached to the Options page, and therefore it closes the Options page.